import { defineComponent, onMounted, reactive, ref } from "vue";
import styles from "./InsuranceProduct.module.less";
import { imgPath } from "@/common/utils";
import { useRouter } from "vue-router";
import { message } from "ant-design-vue";
import { $getProductList } from "@/api/product/product";

export default defineComponent({
  name: 'insupanceProduct',
  setup() {
    const router = useRouter();
    // 跳转路由path
    const toPath = (path: string) => {
      router.push(path);
    }
    const button = reactive({
      list: [
        {
          name: '特色保险',
        },
        {
          name: '团体意外险',
        },
        {
          name: '责任保险',
        },
      ],
      actived: 0,
    })
    const insuranceProductList = reactive({
      list: []
    })

    //点击产品分类导航
    const clickNav = (index: number) => {
      if (index != 0) {
        message.info('暂无相关保险')
      }
    }

    onMounted(() => {
      $getProductList({}).then((res: any) => {
        let list = [];
        list = res?.data?.data || [];
        insuranceProductList.list = list.slice(0, 3);
      })
    })
    //跳转产品列表
    const goGroupList = () =>{
      toPath('/GroupList');
      const dom: any = document.getElementById("app");
      dom.scrollTop = 0;
    }
    //跳转产品详情
    const itemDetail = (item: any) => {
      toPath(`/GroupDetail?id=${item.id}`)
      const dom: any = document.getElementById("app");
      dom.scrollTop = 0;
    }
    return () => (
      <div class={styles.insupanceProduct}>
        <div class={styles.header}>
          <div class={styles.title}>精选保险产品</div>
        </div>
        <div class={styles.container}>
          <div class={styles.list}>
            <div class={styles['list-directory']}>
              <div class={styles['title-box']}>
                <div class={styles['title']}>保险产品分类</div>
                <div class={styles['line']}></div>
                <div class={styles['details-btn']} onClick={() => { goGroupList() }}>查看详情</div>
              </div>
              <div class={styles['content']}>
                <div class={styles['button-box']}>
                  {
                    button.list.map((itemB: any, index: number) => (
                      <div class={[styles['button-item'], index === button.actived && styles.actived]} onClick={() => { clickNav(index) }}>{itemB.name}</div>
                    ))
                  }
                </div>
              </div>
            </div>
            {
              insuranceProductList.list.map((item: any) => (
                <div class={styles.item}>
                  <div class={styles['info-box']}>
                    <div class={styles.title}>{item.name}</div>
                    <div class={styles.info}>
                      {
                        item.liability_tag?.slice(0, 3)?.map((itemI: any) => (
                          <div class={styles['info-item']}>
                            <div class={styles.drop}></div>
                            <div class={styles.value}>{itemI}</div>
                          </div>
                        ))
                      }
                    </div>
                    <div class={styles['img-box']}>
                      <img src={imgPath('/home/insupanceProduct-img.png')} />
                    </div>
                  </div>
                  <div class={styles.shadow}></div>
                  <div class={styles['shadow-btn']} onClick={() => { itemDetail(item) }}>查看并投保</div>
                </div>
              ))
            }
          </div>
        </div>
      </div>
    )
  }
})